<script lang="ts" setup>
import type { Blog } from "~/types";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: Object as PropType<Blog>,
    default: () => ({
      title: undefined,
      desc: undefined,
      tags: undefined,
    }),
  },
  tags: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
});
const emit = defineEmits(["update:show", "update:modelValue", "submit"]);
const loading = ref(false);
const input = ref(props.modelValue);
async function submit() {
  emit("update:modelValue", input.value);
  emit("update:show", false);
  emit("submit", input.value);
}
watch(
  () => props.modelValue,
  (val) => {
    input.value = val;
  }
);
</script>

<template>
  <ClientOnly>
    <var-overlay :show="props.show">
      <var-form
        ref="form"
        class="box"
        scroll-to-error="start"
        @submit="submit()"
      >
        <var-space
          direction="column"
          :size="[14, 0]"
        >
          <h2>文章信息</h2>

          <var-input
            variant="outlined"
            size="small"
            placeholder="请输入标题"
            :rules="[(v) => !!v || '标题不能为空']"
            v-model="input.title"
          >
          </var-input>
          <var-input
            variant="outlined"
            type="password"
            size="small"
            textarea
            placeholder="请输入描述"
            :rules="[(v) => !!v || '描述不能为空']"
            v-model="input.desc"
          >
          </var-input>
          <Tags
            v-model="input.tags"
            style="max-width: 20em"
            :data="props.tags"
          ></Tags>
          <div style="display: flex; gap: 1em">
            <var-button
              style="flex: 1"
              :loading="loading"
              loading-type="wave"
              type="primary"
              native-type="submit"
              >提 交</var-button
            >
            <var-button
              style="flex: 1"
              text
              :loading="loading"
              loading-type="wave"
              type="default"
              native-type="reset"
              @click="emit('update:show', false)"
              >返 回</var-button
            >
          </div>
        </var-space>
      </var-form>
    </var-overlay>
  </ClientOnly>
</template>

<style lang="less" scoped>
.box {
  padding: 0.8em;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.5em;
  background-color: var(--color-body);
  box-shadow: 0 0 1em 0 rgb(0 0 0 / 0.1);
}
</style>
